import { DownOutlined } from '@ant-design/icons';
import { Button, Dropdown, Select, Space, Table, message } from 'antd';
import { Icon, Style } from 'ol/style';
import { useState, useEffect, useRef } from 'react';
import dwPng from './image/定位.png';
import ZhpgApi from '../../../../../../../utils/apis/ZhpgApi';
import useMap from '../../hooks/useMap';
import { resourcePath } from '../../../../../../../utils/resource';
import { createLayer, dataToFeature, navByWkt } from '../../../../../../../utils/helper/mapHelper';
import ScrollTable from '../../../../../../common/ScrollTable';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';

export default function RiskSelector(props) {

    const [datas, setDatas] = useState();
    const [selectValue, setSelectValue] = useState('地质灾害');
    const [loading, setLoading] = useState();

    const parentRef = useRef();
    useEffect(() => {
        setLoading(true)
        if (selectValue === '预警信息') {
            JcyjApi.yjList({
                pageSize: 100
            }).then(resp => {
                setDatas(resp.rows);
            }).finally(e => {
                setLoading(false)
            })
        } else {
            ZhpgApi.xzzzh_find(selectValue).then(resp => {
                setDatas(resp.rows?.map(row => {
                    if (!row.geom && row.jd && row.wd) {
                        row.geom = `POINT(${row.jd} ${row.wd})`;
                    }
                    return row;
                }));
            }).finally(e => {
                setLoading(false)
            })
        }
    }, [selectValue])



    const handleChange = (value) => {
        setSelectValue(value)
    }

    const map = useMap();
    const [value, setValue] = useState();
    const [layers, setLayers] = useState();
    // console.log('value', value)


    useEffect(() => {
        if (map) {
            let zhLayer;
            if (value) {
                if (!value?.geom && value?.jd && value?.wd) {
                    value.geom = `POINT(${value.jd} ${value.wd})`
                }
                if (!value?.geom && !value?.jd && !value?.wd) {
                    return alert('此条数据缺失地理信息，无法在地图标示')
                }
                console.log('value', value)
                const features = dataToFeature(value);
                if (!features) {
                    message.warning('无位置信息');
                    return;
                }
                zhLayer = createLayer((feature) => {
                    return new Style({
                        image: new Icon({
                            src: resourcePath.iconMap[value?.yhlx] || resourcePath.iconMap[value?.yhlb] || resourcePath.mapIcons['yjxx_red'],
                            scale: 0.7,
                            anchor: [0.5, 1]
                        })
                    })
                }, [features]);
                zhLayer.set('type', value?.yhlx);
                map.addLayer(zhLayer)
            }
            return () => {
                map.removeLayer(zhLayer)
            }
        }

    }, [map, value])

    const isYj = selectValue === '预警信息'

    return <div className='layout-v h100'>
        <div className='layout-h center' style={{
            // padding: "12px 12px 0"
        }}>
            <div style={{
                marginRight: 12
            }}>选择评估点</div>
            <div className='fill'>
                <Select onChange={handleChange} style={{
                    width: '100%',
                    margin: '3px 5px'
                }}
                    defaultValue="地质灾害"
                    options={[
                        {
                            label: '洪涝灾害',
                            value: '洪涝',
                        },
                        {
                            label: '地震灾害',
                            value: '地震',
                        }, {
                            label: '地质灾害',
                            value: '地质灾害',
                        }, {
                            label: '森林火灾',
                            value: '火灾',
                        }, {
                            label: '预警信息',
                            value: '预警信息',
                        }]} />
            </div>
        </div>
        <div className='fill h0' style={{
            marginTop: 12
        }} ref={parentRef}>

            <ScrollTable pagination={{
                simple: true
            }} parentNode={parentRef.current} size="small" loading={loading} dataSource={datas} bordered columns={[{
                title: isYj ? '预警名称' : '隐患名称',
                dataIndex: isYj ? 'yjbt' : 'yhmc',
                ellipsis: true,
                width: 170
            },
            {
                title: '隐患类型',
                dataIndex: isYj ? 'yhlb' : 'yhlx',
                ellipsis: true
            },
            {
                width: 50,
                align: "center",
                title: '操作',
                render: (record) => {
                    return <img src={dwPng} alt='定位' style={{
                        height: 18,
                        cursor: 'pointer'
                    }}
                        onClick={e => {
                            if (record.geom) {
                                navByWkt(record.geom, map);
                                setValue(record)
                                props.onDetail?.(record)
                                props.onSelected?.(record)
                            } else {
                                message.warning('无位置信息')
                            }
                        }} />
                }

            }
            ]}

            />

        </div>

    </div>
}